<template>
    <div class="all-cart">
        <div class="all-cart-box" v-for="item of cart"
            :key="item.id"
        >
            <label><input type="checkbox" /></label>
            <img  class="all-cart-box-img" :src="item.image" />
            <p class="all-cart-box-title">{{item.title}}</p>
            <p class="all-cart-box-price" >￥{{item.price}}</p>
            <button 
                class="all-cart-box-cut"
                @click="cut(item.id)"

             >-</button>
            <span class="all-cart-box-count">{{item.count}}</span>
            <button 
            class="all-cart-box-cut"
             @click="add(item.id)"
            >+</button>
        </div>
        <div    class="howmach">
             <label><input type="checkbox" />全选</label>
             <div class="howmach-to">总价:￥{{totalPrice}}</div>
        </div>
    </div>
</template>

<script>
  import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
    computed:{
        ...mapState(['cart']),
        ...mapGetters(['totalPrice'])
    },
    methods:{
        ...mapMutations(['add','cut'])
    },
    created(){
        console.log(this)
    }
}
</script>

<style lang="scss" scoped>
    .all-cart{
        height: 100%;
        &-box{
            height: 120px;
            width: 100%;
            display: flex;
            border: 1px solid red;
            &-img{
                height:100px;
                width:100px;
            }
            &-title{
                  height: 70px;
                  width: 100px;
                   border: 1px solid red;
            }
            &-count{
                  height: 30px;
                 width: 30px;
            }
             &-cut{
                 height: 30px;
                 width: 30px;
                 display: block;
             }
             &-price{
                   height: 30px;
                 width:70px;
                   border: 1px solid red;
             }
        }
    }
    .howmach{
        position: fixed;
        height: 56px;
        border: 1px solid red;
        bottom:56px;
        width: 100%;
        display: flex;
        &-to{
             width:150px;
              border: 1px solid red;
              background: red;
        }
    }
</style>
